import React from 'react'

// icon
import ApplePayIcon from '../../res/images/web/consume/applepay.png'
import AliPayIcon from '../../res/images/web/consume/alipay.png'
import WeChatIcon from '../../res/images/web/consume/wechatpay.png'

import constants from "../../utils/constants"
import './CoinConsumeCard.css'
import {formatDate} from "../../utils/dateService";

const CoinConsumeCard = (props) => {

    const {
        Dealno,
        CreateT,
        State,
        Gold,
        Money,
        Paytype,
    } = props.order

    const date = new Date(Number(CreateT * 1000))
    const dataString = formatDate(date, '-')
    const time = date.toTimeString().split(' ')[0]

    const statusColorMapper = {
        '1': `${constants.themeColor}`,
        '2': '#333',
        // '付款失败': '#eee',
    }

    const statusTextMapper = {
        1: '未付款',
        2: '已付款'
    }

    const iconUrl = {
        // apple: ApplePayIcon,
        // ali: AliPayIcon,
        3: WeChatIcon,
    }

    const statusStyle = {
        color: `${statusColorMapper[State]}`,
    }
    const statusText = statusTextMapper[State]


    return (
        <div className='flex-space-around flex-column wallet-consume-item'>
            <div className='flex-space-between-align-center'>
                <div>
                    <p className='wallet-consume-item-info'>订单编号：{Dealno}</p>
                    <p className='wallet-consume-item-info'>下单时间：{dataString} {time}</p>
                </div>
                <div>
                    <p className='wallet-consume-item-status' style={statusStyle}>{statusText}</p>
                </div>
            </div>
            <div className='flex-space-around-align-center'>
                <div className='text-align-center'>
                    <p className='wallet-consume-item-big-text'>{Gold}</p>
                    <p className='wallet-consume-item-info'>金币数</p>
                </div>
                <div className='text-align-center'>
                    <p className='wallet-consume-item-big-text'>{Money}</p>
                    <p className='wallet-consume-item-info'>价格</p>
                </div>
                <div className='text-align-center'>
                    <img src={iconUrl[Paytype]} style={{paddingBottom: '8px'}}/>
                    <p className='wallet-consume-item-info'>支付方式</p>
                </div>
            </div>
        </div>
    )
}

export default CoinConsumeCard
